import styles from './index.less';
import React, { FC, useState } from 'react';
import ProForm, {
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-form';
import { Space } from 'antd';
import {
  LockOutlined,
  MobileOutlined,
  UserOutlined,
  SketchOutlined,
  QqOutlined,
  WechatOutlined,
  GithubOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import { Link } from 'umi';
import { history } from 'umi';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import { DataInfoType } from './data';

type dataApplicationsProps = {
  dispatch: Dispatch;
  indexPage: DataInfoType;
  loading: boolean;
};

export const IndexPage: FC<dataApplicationsProps> = (props) => {
  const {
    dispatch,
    loading,
    indexPage,
  } = props;

  const [submitting, setSubmitting] = useState(false);

  const loginAction = async (values: API.LoginParams) => {
    setSubmitting(true);
    console.log(values);
    var result = await dispatch({
      type: 'indexPage/login',
      playload: {
        ...values,
      },
    });
    setSubmitting(false);
    history.push('/home');
  };
  return (
    <div className={styles.container}>
      <div>
        <ProForm
          initialValues={{
            autoLogin: true,
          }}
          submitter={{
            searchConfig: {
              submitText: '登录',
            },
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              loading: submitting,
              size: 'large',
              style: {
                width: '100%',
              },
            },
          }}
          onFinish={async (values) => {
            loginAction(values as API.LoginParams);
          }}
        >
          <div className={styles.top}>
            <Link to="/">
              <div className={styles.title}>
                <SketchOutlined />
                <span>自由管理系统登录</span>
              </div>
              <span className={styles.titleInfo}>
                自由配置后台管理系统，实现低量代码开发，动态表单
              </span>
            </Link>
          </div>
          <div className={styles.main}>
            <ProFormText
              name="userName"
              placeholder="请输入用户名"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
            ></ProFormText>
            <ProFormText.Password
              name="password"
              placeholder="请输入密码"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />,
              }}
            ></ProFormText.Password>
            <a
              style={{
                float: 'right',
              }}
            >
              忘记密码？
            </a>
            <div>
              <ProFormCheckbox name="autoLogin">自动登录</ProFormCheckbox>
            </div>
          </div>
        </ProForm>
        <Space className={styles.other}>
          其他登录方式 :
          <QqOutlined className={styles.icon} />
          <WechatOutlined className={styles.icon} />
          <GithubOutlined className={styles.icon} />
          <WeiboCircleOutlined className={styles.icon} />
        </Space>
      </div>
    </div>
  );
};

export default connect(
  ({
    indexPage,
    loading,
  }: {
    indexPage: DataInfoType;
    loading: { models: Record<string, boolean> };
  }) => ({
    indexPage,
    loading: loading.models.indexPage,
  }),
)(IndexPage);
